<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/7/27
  Time: 下午3:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>
<html>
<head>
    <title>分成设置</title>
    <style type="text/css">
        .ems_statites_card {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .ems_statites_card .panel {
            width: 48%;
        }

        .distribution_ratio {

        }
        .distribution_ratio input {
            font-size: 18px;
            width: 90%;
            max-width: 250px;
            font-weight: bold;
            text-align: center;
        }
        .distribution_ratio button {
            width: 90%;
            max-width: 250px;
        }

        .description_op_wrap {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .description_op_wrap>div{
            width: 48%;
        }
    </style>
</head>
<body>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">分成设置</h3>
        </div>
        <div class="panel-body">
            <div class="ems_statites_card">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">商家分成比例</h3>
                    </div>
                    <div class="panel-body">
                        <div class="description_op_wrap">
                            <div class="op">
                                <p class="distribution_ratio">
                                    <input class="form-control" type="text" ud-key="merchant_ratio" input-type="1" value="${distributionConfig.merchant_ratio}" readonly>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-outline btn-primary btn-edit">
                                        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                        修改
                                    </button>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-default btn-reset">
                                        <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                                    </button>
                                </p>
                            </div>
                            <div class="description">
                                <div class="well">
                                    举例：商家消费者消费100元，
                                    商家将获利100 * 80% = 80元收入。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">平台分成比例</h3>
                    </div>
                    <div class="panel-body">
                        <div class="description_op_wrap">
                            <div class="op">
                                <p class="distribution_ratio">
                                    <input class="form-control" ud-key="platform_ratio" input-type="2" type="text"  value="${distributionConfig.platform_ratio}" readonly>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-outline btn-primary btn-edit">
                                        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                        修改
                                    </button>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-default btn-reset">
                                        <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                                    </button>
                                </p>
                            </div>
                            <div class="description">
                                <div class="well">
                                    举例：商家消费者消费100元，平台将获得100 * 20% = 20元的收入。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">区县代理分成比例</h3>
                    </div>
                    <div class="panel-body">
                        <div class="description_op_wrap">
                            <div class="op">
                                <p class="distribution_ratio">
                                    <input class="form-control" type="text" ud-key="area_agent_ratio" value="${distributionConfig.area_agent_ratio}" readonly>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-outline btn-primary btn-edit">
                                        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                        修改
                                    </button>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-default btn-reset">
                                        <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                                    </button>
                                </p>
                            </div>
                            <div class="description">
                                <div class="well">
                                    举例：消费者消费100元，平台将按100元的1%比例返利给
                                    区县代理，即：100 * 1% = 1元
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">品牌服务中心分成比例</h3>
                    </div>
                    <div class="panel-body">
                        <div class="description_op_wrap">
                            <div class="op">
                                <p class="distribution_ratio">
                                    <input class="form-control" type="text" ud-key="service_center_agent_ratio" value="${distributionConfig.service_center_agent_ratio}" readonly>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-outline btn-primary btn-edit">
                                        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                        修改
                                    </button>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-default btn-reset">
                                        <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                                    </button>
                                </p>
                            </div>
                            <div class="description">
                                <div class="well">
                                    说明：商家消费者消费100元，平台将按100元的1%比例返利给
                                    品牌服务中心，即：100 * 1% = 1元
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">品牌合作伙伴分成比例</h3>
                    </div>
                    <div class="panel-body">

                        <div class="description_op_wrap">
                            <div class="op">
                                <p class="distribution_ratio">
                                    <input class="form-control" type="text" ud-key="cooperation_partner_agent_ratio" value="${distributionConfig.cooperation_partner_agent_ratio}" readonly>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-outline btn-primary btn-edit">
                                        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                        修改
                                    </button>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-default btn-reset">
                                        <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                                    </button>
                                </p>
                            </div>
                            <div class="description">
                                <div class="well">
                                    说明：商家消费者消费100元，平台将获得20元的收入,平台将按100元的1.5%比例返利给
                                    品牌合作伙伴，即：100 * 1.5% = 1.5元
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">消费商分成比例</h3>
                    </div>
                    <div class="panel-body">

                        <div class="description_op_wrap">
                            <div class="op">
                                <p class="distribution_ratio">
                                    <input class="form-control" type="text" ud-key="recommender_ratio" value="${distributionConfig.recommender_ratio}" readonly>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-outline btn-primary btn-edit">
                                        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                        修改
                                    </button>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-default btn-reset">
                                        <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                                    </button>
                                </p>
                            </div>
                            <div class="description">
                                <div class="well">
                                    举例：商家消费者消费100元，平台将按100元的5%比例返利给
                                    消费商即：100 * 5% = 5元，消费商需要消耗一定比例的积分方可兑换
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">消费者分成比例</h3>
                    </div>
                    <div class="panel-body">

                        <div class="description_op_wrap">
                            <div class="op">
                                <p class="distribution_ratio">
                                    <input class="form-control" type="text" ud-key="consumer_ratio" value="${distributionConfig.consumer_ratio}" readonly>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-outline btn-primary btn-edit">
                                        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                        修改
                                    </button>
                                </p>
                                <p class="distribution_ratio">
                                    <button type="button" class="btn btn-default btn-reset">
                                        <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                                    </button>
                                </p>
                            </div>
                            <div class="description">
                                <div class="well">
                                    举例：商家消费者消费100元，平台将按100元的5%比例返利给
                                    消费者即：100 * 5% = 5元，消费者需要消耗一定比例的积分方可兑换。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            点击查看更多设置
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <div class="ems_statites_card">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h3 class="panel-title">消费者返还积分比例</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="description_op_wrap">
                                        <div class="op">
                                            <p class="distribution_ratio">
                                                <input class="form-control" type="text" ud-key="consumer_score_ratio" value="1:${distributionConfig.consumer_score_ratio}" readonly>
                                            </p>
                                            <p class="distribution_ratio">
                                                <button type="button" class="btn btn-outline btn-primary btn-edit">
                                                    <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                                    修改
                                                </button>
                                            </p>
                                            <p class="distribution_ratio">
                                                <button type="button" class="btn btn-default btn-reset">
                                                    <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                                                </button>
                                            </p>
                                        </div>
                                        <div class="description">
                                            <div class="well">
                                                说明：消费者消费100元，将获取100 * 1 = 100积分。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">商家获得积分比例</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="description_op_wrap">
                                        <div class="op">
                                            <p class="distribution_ratio">
                                                <input class="form-control" ud-key="merchant_score_return_ratio" type="text"  value="1:${distributionConfig.merchant_score_return_ratio}" readonly>
                                            </p>
                                            <p class="distribution_ratio">
                                                <button type="button" class="btn btn-outline btn-primary btn-edit">
                                                    <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                                    修改
                                                </button>
                                            </p>
                                            <p class="distribution_ratio">
                                                <button type="button" class="btn btn-default btn-reset">
                                                    <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                                                </button>
                                            </p>
                                        </div>
                                        <div class="description">
                                            <div class="well">
                                                说明：商家让利20元给平台，平台将返回20 * 2 = 40积分给商家。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    <h3 class="panel-title">消费者积分兑换比例</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="description_op_wrap">
                                        <div class="op">
                                            <p class="distribution_ratio">
                                                <input class="form-control" type="text" ud-key="consumer_exchange_ratio" value="1:${distributionConfig.consumer_exchange_ratio}" readonly>
                                            </p>
                                            <p class="distribution_ratio">
                                                <button type="button" class="btn btn-outline btn-primary btn-edit">
                                                    <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                                    修改
                                                </button>
                                            </p>
                                            <p class="distribution_ratio">
                                                <button type="button" class="btn btn-default btn-reset">
                                                    <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                                                </button>
                                            </p>
                                        </div>
                                        <div class="description">
                                            <div class="well">
                                                说明：消费者可用1积分兑换1元。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h3 class="panel-title">消费商积分兑换比例</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="description_op_wrap">
                                        <div class="op">
                                            <p class="distribution_ratio">
                                                <input class="form-control" type="text" ud-key="recommender_exchange_ratio" value="1:${distributionConfig.recommender_exchange_ratio}" readonly>
                                            </p>
                                            <p class="distribution_ratio">
                                                <button type="button" class="btn btn-outline btn-primary btn-edit">
                                                    <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                                    修改
                                                </button>
                                            </p>
                                            <p class="distribution_ratio">
                                                <button type="button" class="btn btn-default btn-reset">
                                                    <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                                                </button>
                                            </p>
                                        </div>
                                        <div class="description">
                                            <div class="well">
                                                说明：消费商可用1积分兑换1元。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

        $(function () {

           $(".btn-edit").on("click",function () {
                var oldValue = null;
                var $input = $(this).parent().prev().children("input");
                oldValue = $input.val();
                $input.removeAttr("readonly");
                $input.focus();
                $input.unbind("blur").bind("blur",function () {
                    debugger;
                    if (!validate($(this))) {
                        $(this).val(oldValue);
                    }else {
                        update($(this));
                    }
                    $input.attr("readonly","");
                });

           });

            $(".btn-reset").on("click",function () {
                var $input = $(this).parent().prev().prev().children("input");
                $input.attr("readonly","");
                $input.unbind("blur");
                resetDefault($input);
            });
        })

        function validate($input) {

            if (parseFloat($input.val()) < 0) {
                $.errorAlert("分成设置不能为负数");
                return false;
            }
            //商家
            var type = parseInt($input.attr("input-type"));
            if (type == 1) {
                var $platformInput = $("input[input-type=2]");
                if (parseFloat($input.val()) + parseFloat($platformInput.val()) > 100) {
                    $.errorAlert("商家分成与平台分成总和不能超过100%");
                    return false;
                }
            }

            if (type == 2) {
                var $merchantInput = $("input[input-type=1]");
                if (parseFloat($input.val()) + parseFloat($merchantInput.val()) > 100) {
                    $.errorAlert("商家分成与平台分成总和不能超过100%");
                    return false;
                }
            }
            return true;
        }

        function update($input) {
            var updateValue = $input.val();
            $.emsAjax({
                data:{updateKey:$input.attr("ud-key"),updateValue:updateValue},
                url:"/ems/distribution/update",
                success:function (resp) {
                    if (resp.status != "000") {
                        $.toast(resp.message, "cancel");
                    }else {
                        $.toast("更新成功");
                    }
                }
            });
        }

        function resetDefault($input) {
            var updateValue = $input.val();
            $.emsAjax({
                data:{updateKey:$input.attr("ud-key"),updateValue:updateValue},
                url:"/ems/distribution/reset",
                success:function (resp) {
                    if (resp.status != "000") {
                        $.toast(resp.message, "cancel");
                    }else {
                        $.toast("重置成功");
                        $input.val(resp.data);
                    }
                }
            });
        }
    </script>
</body>
</html>
